<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

<style>
body {
	background: url('background-blue-11.png') no-repeat;
	color: yellow;
}
img {
	vertical-align: text-top;
}
.label {
	background: none;
	border: none;
	font-size: larger;
}
.labelTotal {
	background: none;
	border: none;
	font-family: cursive;
	font-size: 400%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.labelHelp {
	background: none;
	background-color: yellow;
	border: none;
	font-family: cursive;
	color:  #FF2400;
	font-size: 110%;
}
.caneca {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
table.fixed {
	table-layout:fixed;
}
table.fixed td {
	overflow: hidden;
}
#draggable {
	width: 1px; height: 1px; position:absolute;
}
input {
	background: transparent;
	color: yellow;
	border-color: green;
}
.botaoAcao {
	background-color: green;
	color: yellow;
}

</style>
<script>
function getObj(id) {
	return $("#" + id)[0];
}

function Position(x, y) {
	this.x = x;
	this.y = y;
}

function getIndice(divId) {
	var tmp = divId.split("_");
	indice = parseInt(tmp[1]);
	indice = indice - 1;
	return indice;
}

var Jogador =  function(chopPosition, primeiroChopPos, novoChopTempPos, limiteX, limiteY, tempX) {
	this.chopPos = chopPosition;
	this.primeiroChopPos = primeiroChopPos;
	this.novoChopTempPos = novoChopTempPos;
	this.limiteX = limiteX;
	this.limiteY = limiteY;
	this.tempX = tempX;
	this.qtdChops = 0;
}

var CHOP1_LIMITE_X = 220;
var CHOP1_LIMITE_Y = 170;
var CHOP2_LIMITE_X = 160;
var CHOP2_LIMITE_Y = 340;
var CHOP3_LIMITE_X = 190;
var CHOP3_LIMITE_Y = 340;
var CHOP4_LIMITE_X = 220;
var CHOP4_LIMITE_Y = 400;
var BEER_AUDIO_FILE = "/android_asset/www/audio/beer-2.wav";
var BURP_AUDIO_FILE = "/android_asset/www/audio/burp.wav";
//var INIT_AUDIO_FILE =  "/android_asset/www/audio/hummBeer.mp3";
var CASH_REGISTER_FILE = "/android_asset/www/audio/cashregister.wav";

var gJogadores = [];
gJogadores[0] = new Jogador(new Position(180, 75), new Position(120, 130), new Position(120, 130), CHOP1_LIMITE_X, CHOP1_LIMITE_Y, 40);
gJogadores[1] = new Jogador(new Position(60, 310), new Position(110, 240), new Position(110, 240), CHOP2_LIMITE_X, CHOP2_LIMITE_Y, 40);
gJogadores[2] = new Jogador(new Position(290, 310), new Position(240, 240), new Position(240, 240), CHOP3_LIMITE_X, CHOP3_LIMITE_Y, 40);
gJogadores[3] = new Jogador(new Position(180, 480), new Position(120, 450), new Position(120, 450), CHOP4_LIMITE_X, CHOP4_LIMITE_Y, 40);

var JogQtdChops = [];

var qtdTotal = 0;

$(document).ready(
	function() {
		var divChop1 = getObj("divChop_1");
		var divChop2 = getObj("divChop_2");
		var divChop3 = getObj("divChop_3");
		var divChop4 = getObj("divChop_4");
		var jog1QtdChops = getObj("jog1QtdChops");
		var jog2QtdChops = getObj("jog2QtdChops");
		var jog3QtdChops = getObj("jog3QtdChops");
		var jog4QtdChops = getObj("jog4QtdChops");
		var qtdTotalChops = getObj("qtdTotalChops");
		JogQtdChops[0] = jog1QtdChops;
		JogQtdChops[1] = jog2QtdChops;
		JogQtdChops[2] = jog3QtdChops;
		JogQtdChops[3] = jog4QtdChops;
		place(divChop1, gJogadores[0].chopPos.x, gJogadores[0].chopPos.y);
		place(divChop2, gJogadores[1].chopPos.x, gJogadores[1].chopPos.y);
		place(divChop3, gJogadores[2].chopPos.x, gJogadores[2].chopPos.y);
		place(divChop4, gJogadores[3].chopPos.x, gJogadores[3].chopPos.y);
		place(jog1QtdChops, gJogadores[0].chopPos.x + 50, gJogadores[0].chopPos.y);
		place(jog2QtdChops, gJogadores[1].chopPos.x, gJogadores[1].chopPos.y + 50);
		place(jog3QtdChops, gJogadores[2].chopPos.x, gJogadores[2].chopPos.y + 50);
		place(jog4QtdChops, gJogadores[3].chopPos.x + 50, gJogadores[3].chopPos.y);
		place(qtdTotalChops, gJogadores[1].chopPos.x + 110, gJogadores[1].chopPos.y - 120);
		place(getObj("setaHelp"), gJogadores[0].chopPos.x - 50, gJogadores[0].chopPos.y);
		place(getObj("infoHelp"), gJogadores[0].chopPos.x - 160, gJogadores[0].chopPos.y + 10);
		
	}
);

function place(elem, x_pos, y_pos) {
  elem.style.position = "absolute";
  elem.style.left = x_pos+'px';
  elem.style.top = y_pos+'px';
}

function limparHelp() {
	// remove a seta de ajuda
	if (getObj("setaHelp")) {
		removeElement(getObj("setaHelp"));
		removeElement(getObj("infoHelp"));
	}
}

function inserirCervejaMesa(divId) {

	limparHelp();
	
	var indiceJog = getIndice(divId);
	
	adicionarChop(indiceJog);
	
	var mesa = document.getElementById('divMesa');
	var newDiv = document.createElement("div");
	newDiv.setAttribute("class", "ui-widget-content, draggable");
	
	var novoChopPos = getNovaPosicaoCervejaJogador(indiceJog);

	var style = "position: absolute; " + "top: " + novoChopPos.y + "px; " + "left: " + novoChopPos.x + "px;";
	newDiv.setAttribute("style", style);
	var elem = document.createElement("img");
	elem.setAttribute("src", "chop.png");
	elem.setAttribute("height", "20");
	elem.setAttribute("width", "20");
	elem.setAttribute("alt", "Chop");
	elem.setAttribute("class", "caneca");
	elem.setAttribute("onclick", "removeCervejaMesa(this," + indiceJog +  ");");
	newDiv.appendChild(elem);
	mesa.appendChild(newDiv);
	// remove a borda de todos os nomes dos jogadores
	removeBorder(getObj("jog1"));
	removeBorder(getObj("jog2"));
	removeBorder(getObj("jog3"));
	removeBorder(getObj("jog4"));
}

function removeCervejaMesa(imgParaRemover, indiceJogador) {
	// vai remover do DOM
	imgParaRemover.parentElement.removeChild(imgParaRemover);
	// vai remover na quantidade
	removerChop(indiceJogador);
	// vai tocar o som do arroto
	playAudio(BURP_AUDIO_FILE);
	
}

function adicionarChop(indiceJogador) {
	var jogQtdChops = JogQtdChops[indice];
	var qtdChops = parseInt(jogQtdChops.value);
	qtdChops = qtdChops + 1;
	qtdTotal = qtdTotal + 1;
	jogQtdChops.value = qtdChops;
	getObj("qtdTotalChops").value = qtdTotal;
	if (qtdTotal > 9) {
		place(getObj("qtdTotalChops"),  gJogadores[1].chopPos.x + 90, gJogadores[1].chopPos.y - 120);	
	} else {
		place(getObj("qtdTotalChops"),  gJogadores[1].chopPos.x + 110, gJogadores[1].chopPos.y - 120);
	}
	// vai tocar o som do da cerveja sendo servida
	playAudio(BEER_AUDIO_FILE);
}

function removerChop(indiceJogador) {
	var jogQtdChops = JogQtdChops[indiceJogador];
	var qtdChops = parseInt(jogQtdChops.value);
	qtdChops = qtdChops - 1;
	qtdTotal = qtdTotal - 1;
	jogQtdChops.value = qtdChops;
	getObj("qtdTotalChops").value = qtdTotal;
}
 
function calcular() {
	limparHelp();
	getObj("totalChops").value = qtdTotal;
	getObj("divMesaBar").style.display = 'none';
	getObj("dialog-modal").style.display = 'block';
	playAudio(CASH_REGISTER_FILE);
}

function help() {
	limparHelp();
	getObj("divMesaBar").style.display = 'none';
	getObj("dialog-info").style.display = 'block';
}

function fecharCalculo() {
	getObj("precoTotalChop").value = "0.00";
	getObj("precoServicoChop").value = "0.00";
	getObj("precoTotal").value = "0.00";
	getObj("divMesaBar").style.display = 'block';
	getObj("dialog-modal").style.display = 'none';
}

function fecharHelp() {
	getObj("divMesaBar").style.display = 'block';
	getObj("dialog-info").style.display = 'none';
}
function calcularConta() {
	var precoTxt = getObj("precoChop").value;
	precoTxt = precoTxt.replace(",",".");
	var precoChop = parseFloat(precoTxt);
	var taxaServico = parseFloat(getObj("taxaServico").value);
	taxaServico = taxaServico / 100;
	taxaServico = taxaServico.toFixed(2);
	var precoTotalChop = qtdTotal * precoChop;
	var precoServicoChop = precoTotalChop * taxaServico;
	var precoTotal = precoTotalChop + precoServicoChop;
	getObj("precoTotalChop").value = precoTotalChop;
	getObj("precoTotalChop").value = getObj("precoTotalChop").value.substring(0,4);
	getObj("precoServicoChop").value = precoServicoChop;
	getObj("precoServicoChop").value = getObj("precoServicoChop").value.substring(0,4);
	getObj("precoTotal").value = precoTotal;
	getObj("precoTotal").value = getObj("precoTotal").value.substring(0,4);
}

function getNovaPosicaoCervejaJogador(indiceJogador) {
	
	var dadosJogador = gJogadores[indiceJogador];
	var novoChopPos = dadosJogador.novoChopTempPos;
	switch (Number(indiceJogador)) {
		case 0:
			novoChopPos.x = novoChopPos.x + 20;
			if (novoChopPos.x > dadosJogador.limiteX) {
				novoChopPos.x = dadosJogador.primeiroChopPos.x + dadosJogador.tempX;
				dadosJogador.tempX = dadosJogador.tempX + 20;
				dadosJogador.limiteX = dadosJogador.limiteX - 20;
				novoChopPos.y = novoChopPos.y + 20;
			}
			if (novoChopPos.y > dadosJogador.limiteY) {
				novoChopPos.x = dadosJogador.primeiroChopPos.x + 20;
				novoChopPos.y = dadosJogador.primeiroChopPos.y;
				dadosJogador.tempX = 40;
				dadosJogador.limiteX = CHOP1_LIMITE_X;
			}
			break;
		case 1:
			novoChopPos.y = novoChopPos.y + 20;
			if (novoChopPos.y > dadosJogador.limiteY) {
				novoChopPos.y = dadosJogador.primeiroChopPos.y + dadosJogador.tempX;
				dadosJogador.tempX = dadosJogador.tempX + 20;
				dadosJogador.limiteY = dadosJogador.limiteY - 20;
				novoChopPos.x = novoChopPos.x + 20;
			}
			if (novoChopPos.x > dadosJogador.limiteX) {
				novoChopPos.y = dadosJogador.primeiroChopPos.y + 20;
				novoChopPos.x = dadosJogador.primeiroChopPos.x;
				dadosJogador.tempX = 40;
				dadosJogador.limiteY = CHOP2_LIMITE_Y;
			}
			break;
		case 2:
			novoChopPos.y = novoChopPos.y + 20;
			if (novoChopPos.y > dadosJogador.limiteY) {
				novoChopPos.y = dadosJogador.primeiroChopPos.y + dadosJogador.tempX;
				dadosJogador.tempX = dadosJogador.tempX + 20;
				dadosJogador.limiteY = dadosJogador.limiteY - 20;
				novoChopPos.x = novoChopPos.x - 20;
			}
			if (novoChopPos.x < dadosJogador.limiteX) {
				novoChopPos.y = dadosJogador.primeiroChopPos.y + 20;
				novoChopPos.x = dadosJogador.primeiroChopPos.x;
				dadosJogador.tempX = 40;
				dadosJogador.limiteY = CHOP3_LIMITE_Y;
			}
			break;
		case 3:
			novoChopPos.x = novoChopPos.x + 20;
			if (novoChopPos.x > dadosJogador.limiteX) {
				novoChopPos.x = dadosJogador.primeiroChopPos.x + dadosJogador.tempX;
				dadosJogador.tempX = dadosJogador.tempX + 20;
				dadosJogador.limiteX = dadosJogador.limiteX - 20;
				novoChopPos.y = novoChopPos.y - 20;
			}
			if (novoChopPos.y < dadosJogador.limiteY) {
				novoChopPos.x = dadosJogador.primeiroChopPos.x + 20;
				novoChopPos.y = dadosJogador.primeiroChopPos.y;
				dadosJogador.tempX = 40;
				dadosJogador.limiteX = CHOP4_LIMITE_X;
			}
			break;
		default:
			break;	
		
	}
	
	return novoChopPos;
}

function mudarTexto(inputText) {
	var nomeJog = inputText.value;
	nomeJog = nomeJog.trim();
	if (nomeJog.length > 3) {
		inputText.size = nomeJog.length;
	} else {
		inputText.size = 2;
	}
}

function removeBorder(element) {
	// remove a borda do elemento caso tenha
	if (element.style.border != 'none') {
		element.style.border = 'none' ;
	}
}

function removeElement(element) {
	element.parentNode.removeChild(element);
}

// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);

// Cordova is ready
function onDeviceReady() {
	// vai tocar algum som de inicializacao
	//playAudio(INIT_AUDIO_FILE);
}

// variaveis para tocar o audio
var my_media = null;
var mediaTimer = null;

// Play audio
function playAudio(src) {
	// se ja existe entao libera o recurso
	// para evitar que pare de tocar por falta de recursos
	if (my_media) {
		my_media.release();
	}
	
	// Create Media object from src
	my_media = new Media(src, onSuccess, onError);
	
	// Play audio
	my_media.play();	

	// Update my_media position every second
	if (mediaTimer == null) {
	    mediaTimer = setInterval(function() {
		// get my_media position
		my_media.getCurrentPosition(
		    // success callback
		    function(position) {
			if (position > -1) {
			    setAudioPosition((position) + " sec");
			}
		    },
		    // error callback
		    function(e) {
			console.log("Error getting pos=" + e);
			setAudioPosition("Error: " + e);
		    }
		);
	    }, 1000);
	}
}

// onSuccess Callback
//
function onSuccess() {
	console.log("playAudio(): Audio Success");
}

// onError Callback 
//
function onError(error) {
	alert('code: '    + error.code    + '\n' + 
      'message: ' + error.message + '\n');
}

// Set audio position
// 
function setAudioPosition(position) {
	document.getElementById('audio_position').innerHTML = position;
}

</script>
</head>
<body>
	<img id="setaHelp" src="green-arrow.gif" width="40" height="40" />
	<span id="infoHelp" class="label">CLICK HERE</span>
	<div id="divMesaBar">
	<table border="0" width="350px" height="550px" class="fixed" >
		<tr>
			<td align="center" class="labelHelp" colspan="3">Please help the developer, click on top!!</td>
		</tr>
		<tr height="10%" >
			<td width="25%"></td>
			<td width="50%" align="center">
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input id="jog1" type="text" size="6" maxlength="10" value="Player 1"  onkeypress="mudarTexto(this);" onblur="removeBorder(this);"  />
				<br/><br/>
				<div id="divChop_1" class="ui-widget-content, draggable">
					<img class="caneca" src="chop.png" width="30" height="40" onClick="inserirCervejaMesa('divChop_1');" />
				</div>
				<input id="jog1QtdChops" class="label" type="text" size="2" maxlength="3" value="0" readonly="true" />
			</td>
			<td width="25%"></td>
		</tr>
		<tr height="80%">
			<td align="center" valign="top">
				<br/><br/><br/><br/><br/><br/><br/><br/><br/>
				<input id="jog2" type="text" size="6" maxlength="10" value="Player 2" onkeypress="mudarTexto(this);" onblur="removeBorder(this);" />
				<div id="divChop_2" class="ui-widget-content, draggable">
					<img class="caneca" src="chop.png" width="30" height="40" onClick="inserirCervejaMesa('divChop_2');" />
				</div>
				<input id="jog2QtdChops" class="label" type="text" size="2" maxlength="3" value="0" readonly="true" />
			</td>
			<td>
				<div id="divMesa">
				</div>
				<input id="qtdTotalChops" class="labelTotal" type="text" size="2" maxlength="3" value="0" readonly="true" />
			</td>
			<td align="center" valign="top">
				<br/><br/><br/><br/><br/><br/><br/><br/><br/>
				<input id="jog3" type="text" size="6" maxlength="10" value="Player 3" onkeypress="mudarTexto(this);" onblur="removeBorder(this);" />
				<div id="divChop_3" class="ui-widget-content, draggable">
					<img  class="caneca" src="chop.png" width="30" height="40" onClick="inserirCervejaMesa('divChop_3');" />
				</div>
				<input id="jog3QtdChops" class="label" type="text" size="2" maxlength="3" value="0" readonly="true" />
			</td>
		</tr>
		<tr height="10%" >
			<td align="center"><img src="info-2.png" width="50" height="50" onclick="help();" /></td>
			<td align="center">
				<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input id="jog4" type="text" size="6" maxlength="10" value="Player 4" onkeypress="mudarTexto(this);" onblur="removeBorder(this);" />
				<div id="divChop_4" class="ui-widget-content, draggable">
					<img  class="caneca" src="chop.png" width="30" height="40" onClick="inserirCervejaMesa('divChop_4');" />
				</div>
				<input id="jog4QtdChops" class="label" type="text" size="2" maxlength="3" value="0" readonly="true" />
			</td>
			<td align="center">
				<img src="money-2.png" width="45" height="45" onclick="calcular();" />
			</td>
		</tr>
	</table>
	</div>
	<div id="dialog-modal" title="Conta" style="display: none; position: absolute; top: 50px; left: 5px;">
		<table border="0" width="350px">
			<tr>
				<td colspan="2" align="center"><h1>Check, Please!!</h1></td>
			</tr>
			<tr>
				<td>Quantity:</td>
				<td><input id="totalChops" type="text" class="label" size="6" maxlength="5" value="0" readonly="readonly" /></td>
			</tr>
			<tr>
				<td>Unit price:</td>
				<td><input id="precoChop" type="text" size="6" maxlength="5" value="0.00" /></td>
			</tr>
			<tr>
				<td>Tax:</td>
				<td><input id="taxaServico" type="text" size="2" maxlength="2" value="10" />%</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td align="right"><button class="botaoAcao" id="btnCalcularConta" type="button" onclick="calcularConta();">Calculate</button></td>
			</tr>
			<tr>
				<td>Beer Price:</td>
				<td><input id="precoTotalChop" class="label" type="text" size="3" maxlength="10" value="0.00" readonly="readonly" />$</td>
			</tr>
			<tr>
				<td>Total tax:</td>
				<td><input id="precoServicoChop" class="label" type="text" size="3" maxlength="4" value="0.00" readonly="readonly" />$</td>
			</tr>
			<tr>
				<td>Total due:</td>
				<td><input id="precoTotal" class="label" type="text" size="3" maxlength="10" value="0.00" readonly="readonly" />$</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td align="right"><button class="botaoAcao" id="btnFechar" type="button" onclick="fecharCalculo();">Close</button></td>
			</tr>
		</table>
	</div>
	<div id="dialog-info" title="Info" style="display: none; position: absolute; top: 50px; left: 5px;">
		<table border="0" width="350px">
			<tr>
				<td align="center"><h1>How to have fun:</h1></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>Click on the <img class="caneca" src="chop.png" width="20" height="25" />  image to add a beer to your friend.</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>Click on the <img class="caneca" src="chop.png" width="20" height="25" /> image that was included to remove a beer from your friend.</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>Click on the <img class="caneca" src="money-2.png" width="20" height="25" /> image to see how much <br/> you have to pay.</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td align="right"><button class="botaoAcao" id="btnFechar" type="button" onclick="fecharHelp();">Close</button></td>
			</tr>
		</table>
	</div>
	<div id="audio_position" style="display: none;" />
</body>
</html>

